<!-- <nova-comp-tag-navbar></nova-comp-tag-navbar> -->
<!-- <ion-input label="Solid input" label-placement="floating" fill="solid" placeholder="Enter text"></ion-input>

<br /> -->
<h3 style="margin-left: 10px;">店铺名</h3>

<div class="layout">
  <div style="flex:100%">
    <ion-input label="搜索菜单" label-placement="floating" fill="outline" placeholder="Enter text"></ion-input>
  </div>



<div class="sidebar">
  <ul>
    <li><a>热销</a></li>
    <li><a>推荐</a></li>
    <li><a>新品</a></li>
    <li><a>活动</a></li>
    
    
    <!-- <li *ngFor="let item of myList;" (click)="showSort(item)"><a>{{item.theID}}</a></li> -->
    
  </ul>
</div>

<div  class="content">
<ion-card style="pointer-events: all;overflow-y: scroll;"> 
    <ion-card-header>
      <ion-card-title>本店菜单</ion-card-title>
      <ion-card-subtitle>图片仅供参考</ion-card-subtitle>
    </ion-card-header>
    <ion-card-content>
      <ion-list>
        <ion-item *ngFor="let item of myList;" (click)="showSort(item)">
          <ion-thumbnail slot="start">
            <img [src]="item.img" >
          </ion-thumbnail>
          <span class="menutext">{{item.name}}</span>
          <span class="menutext2">月销<br>{{item.num}}</span>
          <ion-checkbox (ionChange)="addNumbers($event, item)" [(ngModel)]="choiceMap[item.objectId]" aria-label="Label">{{item.price}}￥</ion-checkbox>

          <ion-label>Item</ion-label>
        </ion-item>
  
        <!-- <ion-item>
          <ion-thumbnail slot="start">
            <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
          </ion-thumbnail>
          <ion-checkbox>菜2</ion-checkbox>
          <ion-label>Item</ion-label>
        </ion-item>     -->
      </ion-list>
    </ion-card-content>
</ion-card>
<h3 class="rmb">总计￥</h3>
<span class="pay">{{ priceSum }}</span>
<a class="submit-btn" id="open-modal" expand="block">提交订单</a>

</div>
</div>

<ion-modal #modal trigger="open-modal">
  <ng-template>
    <ion-content>
      <ion-toolbar>
        <ion-title>Modal</ion-title>
        <ion-buttons slot="end">
          <ion-button color="light" (click)="modal.dismiss()">Close</ion-button>
        </ion-buttons>
      </ion-toolbar>
      <ion-list>
        <ng-container *ngFor="let item of myList">
          <ion-item *ngIf="selectMap[item.objectId]">
            <ion-avatar slot="start">
              <ion-img [src]="item.img"></ion-img>
            </ion-avatar>
            <ion-label>
              <h2>{{item.name}}</h2>
            </ion-label>
          </ion-item>
        </ng-container>
        <!-- <ion-item>
          <ion-avatar slot="start">
            <ion-img src="https://i.pravatar.cc/300?u=a"></ion-img>
          </ion-avatar>
          <ion-label>
            <h2>Daniel Smith</h2>
            <p>Product Designer</p>
          </ion-label>
        </ion-item>
        <ion-item>
          <ion-avatar slot="start">
            <ion-img src="https://i.pravatar.cc/300?u=d"></ion-img>
          </ion-avatar>
          <ion-label>
            <h2>Greg Smith</h2>
            <p>Director of Operations</p>
          </ion-label>
        </ion-item>
        <ion-item>
          <ion-avatar slot="start">
            <ion-img src="https://i.pravatar.cc/300?u=e"></ion-img>
          </ion-avatar>
          <ion-label>
            <h2>Zoey Smith</h2>
            <p>CEO</p>
          </ion-label>
        </ion-item> -->
      </ion-list>
    </ion-content>
  </ng-template>
</ion-modal>